<template>
	<view class="topbar">
		<view class="topbar-con" :style="{'width':topbarWidth,'background':bgColor,'font-size':textFontSize}">
			<block v-for="(item,index) in topbarList" :key="index">
				<text :style="{'width':getViewWidth,'color':(activeIndex == item.id ? textColor : defaultTextColor)}"
					@click="changeActive(item.id,item)" class="topbar-item">{{item.text}}</text>
			</block>
			<view class="topbar-item-box" v-if="useDefaultActiveColor"
				:style="{'width':getBottomViewWidth,'left':leftDistance,'background': activeColor}"></view>
			<view class="topbar-item-box" v-else
				:style="{'width':getBottomViewWidth,'left':leftDistance,'background': bgColor}"></view>
		</view>
	</view>
</template>

<script>
	import {
		stringify
	} from 'querystring'
	export default {
		props: {
			//1，宽度
			topbarWidth: {
				type: String,
				default: '100%'
			},
			//2，每个view的宽度
			topbarViewWidth: {
				type: String,
				default: ''
			},
			//3，是否使用默认底部view选中的active颜色
			useDefaultActiveColor: {
				type: Boolean,
				default: true
			},
			//4，选中的底部active的颜色
			activeColor: {
				type: String,
				default: 'red'
			},
			//5，topbar主要内容
			topbarList: {
				type: Array,
				default: []
			},
			//6，底部view宽度
			bottomViewWidth: {
				type: String,
				default: ''
			},
			//7，背景颜色
			bgColor: {
				type: String,
				default: '#fff'
			},
			//8，字体颜色
			textColor: {
				type: String,
				default: '#333'
			},
			//9，默认字体颜色
			defaultTextColor: {
				type: String,
				default: '#333'
			},
			//10，字体大小
			textFontSize: {
				type: String,
				default: '26rpx'
			},
			//选中的active
			activeIndex: {
				type: Number,
				default: 1
			}
		},
		computed: {
			//1，计算每个view所占的宽度
			getViewWidth() {
				if (this.topbarViewWidth != '' && this.topbarViewWidth != null) {
					return this.topbarViewWidth
				} else {
					//默认使用 flex 1（100%均等分）
					return (100 / this.topbarList.length) + '%'
				}
			},
			//2，计算每个底部view的宽度
			getBottomViewWidth() {
				if (this.bottomViewWidth != '' && this.bottomViewWidth != null) {
					return this.bottomViewWidth
				} else {
					//默认为topbarView宽度的50%
					return (100 / this.topbarList.length / 2) + '%'
				}
			}
		},
		data() {
			return {
				leftDistance: 40
			}
		},
		methods: {
			//1，计算底部view距离左侧距离
			changeActive(index, item) {
				var viewWidth = 100 / this.topbarList.length
				var defaultWidth = 100 / this.topbarList.length / 4
				this.leftDistance = defaultWidth + viewWidth * (index - 1) + '%'
				this.$emit('changeActiveIndex', index, item)
			}
		},
		mounted() {
			this.changeActive(1)
		}
	}
</script>

<style scoped lang="scss">
	.topbar-con {
		// width: 100%;
		position: relative;
		top: 0;
		// box-shadow: 0 -1px 10px #ddd;
		// background-color: #fff;
		left: 0;
		display: flex;
		height: 100rpx;


		.topbar-item {
			// width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			//color: red;
		}

		.topbar-item-box {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			// 如果盗汗了就六个导航栏，那么每一个盗汗了宽度就是六分之一
			// width: 80rpx;
			height: 2rpx;
			border-radius: 4rpx;
			transition: .5s;
			// background-color: red;
		}

		// .topbar-item:nth-child(1):hover~.topbar-item-box {
		// 	left: 40rpx;
		// 	background-color: red;
		// }

		// .topbar-item:nth-child(2):hover~.topbar-item-box {
		// 	left: 200rpx;
		// 	background-color: red;
		// }

		// .topbar-item:nth-child(3):hover~.topbar-item-box {
		// 	left: 360rpx;
		// 	background-color: red;
		// }

	}
</style>